import router from './router'
import store from '@/store/index.js'
// 引入NProgress进度条
import NProgress from 'nprogress'
// 导入NProgress进度条样式
import 'nprogress/nprogress.css'
// 基础权限拦截(判断登录状态,就看有没有token)
// 1.登录状态下,不能手动切换到/login页面,如果切换强制回到/首页
// 2.未登录状态下,之能去/login页面(白名单),其他页面你不能跳转

import getPageTitle from '@/utils/get-page-title'
const whiteList = ['/login', '/404'] // 白名单

// 全局前置路由守卫(只要路由发生跳转就先执行这里,在跳转页面之前)
// 刷新网页会让路由守卫再走一次
router.beforeEach(async(to, from, next) => {
  // 显示进度条
  NProgress.start()
  const token = store.getters.token
  if (token) { // 有token
    // 判断有token是否去登录页,如果去的登录页,强制留在首页
    if (to.path === '/login') {
      next('/')
      NProgress.done() // 重定向,就会导致上一次路由终端,启动的进度条需要手动关闭,重定向会导致路由守卫再次执行,再次开启一个进度条,跳转后关闭
    } else {
      /*
      如果没有用户名字,先请求等待成功后,我们在放行next()
      如果有名字,if是进不去的,那是也还是需要走next()放行页面
      如果没有名字再请求,有名字就不用请求了(vuex有值),不写判断就会每次都请求,浪费流量
      */
      // 为何加await:
      /*
        await:等待:等待后面的用户信息保存到vuex中,再next()跳转页面,就能直接看到用户名
        如果不加,异步去请求,主线程代码会先往下next()跳转页面,页面上没有名字,异步请求数据完成vuex值变量化
        响应式更新所有使用vuex相关变量->从没有名字->有名字显示
      */
      next()// 有token,不去登录页,放行
      if (!store.getters.name) { await store.dispatch('user/getUserInfoActions') }
    }
  } else { // 没有token
    // 判断是不是去白名单,去白名单放行,不然强制登录页
    if (whiteList.includes(to.path)) next() // 去白名单
    else { // 没登录还想去别的主页,不允许
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach((to, from) => {
  // 进度条结束
  NProgress.done() // 进度条结束

  // 网页切换完毕,再设置当前切换完毕的这个页面的标题
  // console.log(to) // 运行时的路由对象信息,包含路由规则数组里的对象
  document.title = getPageTitle(to.meta.title)
})

